<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./jq-3.6.0.min.js"></script>
  <script>
    // 选择第一个
    $('li:first')

    // 选中最后一个
    $('li:last')

    // 匹配所有未选中的input
    $('input:not(checked)')

    // 选择偶数
    $('li:even')

    // 选择奇数
    $('li:odd')

    // 选中元素里的第n个
    $('li:eq(0)')

    $('li').eq(0)

    // 选中下标大于n的元素
    $('li:gt(0)')

    $('li').gt(0)

    // 选中下标小于n的元素
    $('li:lt(2)')

    $('li').lt(2)

    // 选中页面中所有h1 h2 h3 h4 h5 h6标签
    $(':header')

    // 匹配所有正在执行动画的元素
    $('div:animated')

    // 选中根元素html标签
    $(':root')

    // 匹配所有获取到焦点的元素
    $(':focus')

    // 匹配含有textStr的元素
    $('p:contains(textStr)')

    // 匹配含有子元素或文本的元素
    $('div:parent')

    // 匹配不含有子元素或文本的空元素
    $('p:empty')

    // 匹配拥有某个选择器的元素
    $('div:has(.box)')

    // 匹配含有id为#box的元素
    $('div[box]')
    
  </script>
</body>
</html>